<template>
  <div class="relation-button" @click.stop="openModel">
    <span class="iconfont">&#xe7be;</span>
  </div>
  <RelationFormListPopup
      :context="context"
      :subFormId="subFormId"
      :rowIndex="rowIndex"
      :rowId="rowId"
      :manualConfigs="manualConfigs"
      v-model:show="show"/>
</template>
<script setup>
import {createProps} from '@/utils';
import RelationFormListPopup from '@comp/FormEngine/field/relation/RelationFormListPopup/RelationFormListPopup.vue';
import {shallowRef} from 'vue';

defineOptions({name: 'RelationButton'});
const emits = defineEmits('click');
const props = defineProps({
  rowIndex: createProps(Number),
  rowId: createProps(String),
  manualConfigs: createProps(Array, () => []),
  subFormId: createProps(String),
  context: createProps(Object, () => undefined),
});
const show = shallowRef(false);

function openModel() {
  show.value = true;
}
</script>
<style scoped lang="less">
.relation-button:active {
  background: var(--van-gray-5);
  border-radius: 4px;
}

.relation-button .iconfont {
  font-size: 0.2rem;
}

.relation-button {
  color: var(--van-primary-color);
  padding: 0.05rem;
  width: 0.22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0.2rem;
}
</style>e